<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Tooplate">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
          rel="stylesheet">

    <title>文物展览系统 - 文物收藏管理</title>

    <!-- Additional CSS Files -->
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/owl-carousel.css">
    <link rel="stylesheet" href="/assets/css/tooplate-artxibition.css">

    <style>
        .management-header {
            background-color: #f8f9fa;
            padding: 20px 0;
            margin-bottom: 30px;
        }
        .search-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .action-buttons .btn {
            margin-right: 5px;
        }
        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
    </style>
</head>

<body>
<!-- ***** Pre Header ***** -->
<div th:replace="Header"></div>

<!-- 管理页面头部 -->
<div class="management-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>文物收藏管理</h2>
                <span>管理系统中的所有文物信息</span>
            </div>
        </div>
    </div>
</div>

<!-- 搜索和操作区域 -->
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="search-box">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="搜索文物名称、年代或材质...">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button">
                                    <i class="fa fa-search"></i> 搜索
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 text-right">
                        <button class="main-dark-button" data-toggle="modal" data-target="#addRelicModal">
                            <i class="fa fa-plus"></i> 添加文物
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 文物列表 -->
    <div class="row">
        <div class="col-lg-12">
            <div class="table-container">
                <table class="table table-hover">
                    <thead class="thead-dark">
                    <tr>
                        <th>ID</th>
                        <th>文物图片</th>
                        <th>文物名称</th>
                        <th>年代</th>
                        <th>材质</th>
                        <th>分类</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="relic : ${relics}">
                        <td th:text="${relic.id}">1</td>
                        <td>
                            <img th:src="${relic.imageUrl}" src="/assets/images/about-image.jpg"
                                 alt="文物图片" style="width: 60px; height: 60px; object-fit: cover;">
                        </td>
                        <td th:text="${relic.name}">青铜鼎</td>
                        <td th:text="${relic.era}">商代</td>
                        <td th:text="${relic.material}">青铜</td>
                        <td th:text="${relic.category}">礼器</td>
                        <td>
                            <span class="badge badge-success" th:if="${relic.status}">已展示</span>
                            <span class="badge badge-secondary" th:unless="${relic.status}">未展示</span>
                        </td>
                        <td class="action-buttons">
                            <button class="btn btn-sm btn-primary">
                                <i class="fa fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-sm btn-danger">
                                <i class="fa fa-trash"></i> 删除
                            </button>
                            <button class="btn btn-sm btn-info">
                                <i class="fa fa-eye"></i> 详情
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <ul>
                    <li><a href="#">上一页</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 添加文物模态框 -->
<div class="modal fade" id="addRelicModal" tabindex="-1" role="dialog" aria-labelledby="addRelicModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addRelicModalLabel">添加新文物</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>文物名称</label>
                                <input type="text" class="form-control" placeholder="请输入文物名称">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>年代</label>
                                <input type="text" class="form-control" placeholder="请输入文物年代">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>描述</label>
                        <textarea class="form-control" rows="3" placeholder="请输入文物描述"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>材质</label>
                                <input type="text" class="form-control" placeholder="请输入文物材质">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>分类</label>
                                <select class="form-control">
                                    <option>礼器</option>
                                    <option>兵器</option>
                                    <option>生活用品</option>
                                    <option>艺术品</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>上传图片</label>
                        <input type="file" class="form-control-file">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="main-dark-button">保存</button>
            </div>
        </div>
    </div>
</div>

<div th:replace="footer"></div>

<!-- jQuery -->
<script src="/assets/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script src="/assets/js/popper.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-- Plugins -->
<script src="/assets/js/scrollreveal.min.js"></script>
<script src="/assets/js/waypoints.min.js"></script>
<script src="/assets/js/jquery.counterup.min.js"></script>
<script src="/assets/js/imgfix.min.js"></script>
<script src="/assets/js/mixitup.js"></script>
<script src="/assets/js/accordions.js"></script>
<script src="/assets/js/owl-carousel.js"></script>
<!-- Global Init -->
<script src="/assets/js/custom.js"></script>

<script>
    $(document).ready(function() {
        // 管理页面初始化代码
        console.log('文物收藏管理页面加载完成');
    });
</script>
</body>
</html>